<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<App />
		</div>
		<script src="../node_modules/vue/dist/vue.js"></script>
		<script src="../node_modules/axios/dist/axios.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let App = {
				template:`
				<div>
					<button @click="sendAllAjax">点击发送并发请求</button>
				</div>
				`,
				methods: {
					sendAjax1(){
						let param = {
							params: {
								name: '111',
								age: 111,
							}
						}
						return this.$axios.get('getData.json', param)
					},
					sendAjax2(){
						let param = {
							params: {
								name: '222',
								age: 333,
							}
						}
						return this.$axios.get('getData2.json', param)
					},
					sendAllAjax(){
						this.$axios.all([this.sendAjax1(),this.sendAjax2()]).then(this.$axios.spread((res1, res2)=>{
							console.log(res1, res2)
						})).catch(err => {
							//其中一个失败则进入err分支
						})
					},
					
				}
			}
			
			//挂载axios
			Vue.prototype.$axios = axios
			let vm = new Vue({
				el: '#app',
				components: {App},
				data(){
					return {
						
					}
				},
			})
		</script>
	</body>
</html>
